@extends('layouts.admin')
@section('content')
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-sm-4">
      <h2>H2</h2>
      <ol class="breadcrumb">
          <li>
              <a href="index.html">This is TestTestTest</a>
          </li>
          <li class="active">
              <strong>BreadcrumbTestTestTest</strong>
          </li>
      </ol>
  </div>
  <div class="col-sm-8">
      <div class="title-action">
          <a href="" class="btn btn-primary">This is action area</a>
      </div>
  </div>
</div>
<div class="wrapper wrapper-content">
    <div class="middle-box text-center animated fadeInRightBig">
        <h3 class="font-bold">This is page content</h3>
        <div class="error-desc">
            You can create here any grid layout you want. And any variation layout you imagine:) Check out
            main dashboard and other site. It use many different layout.

<br/>
            <div id="test" title="this is hello world"><h2>点击改变数据@{{site}}</h2></div>
            <div id="test2" title="this is hello world" v-html="template"><h2>点击改变数据@{{template}}</h2></div>
            <div id="test3" v-on:click="oc"><h2>点击弹出数据@{{message}}</h2></div>
            <div id="test4" ><p>双向绑定@{{message}}</p><input v-model="message"></div>
<br/>

            <a href="index.html" class="btn btn-primary m-t">Dashboard</a>
        </div>
    </div>
</div>
    <script>
        var vm = new Vue({
            el: "#test4",
            data:{
                message:'chunvue',
                template:"<div><h2>原有内容</h2></div>",
                title:"this is hello word",
                site:"菜鸟教程",
                url: "www.runoob.com",
                oc: function () {
                    alert('123');
                }
            }
        });
    </script>
@endsection